<template>
    <div>
        <div class="container" style="margin-bottom: 20px">
            <el-tag class="tag-header" :class="selectTag==1?'active':''" @click="selectClick(1)">月报表</el-tag>
            <el-tag class="tag-header" :class="selectTag==2?'active':''" @click="selectClick(2)">年报表</el-tag>
        </div>
        <div class="container">
            <div>
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="24" :md="5" :lg="5">
                        <div class="grid-content bg-purple">
                            <div class="left-box">
                                <div class="left-title">组织资源</div>
                                <div>
                                    <el-tree
                                            :data="tagsList"
                                            :props="props"
                                            :load="loadNode"
                                            lazy
                                            highlight-current
                                            show-checkbox
                                            node-key="id"
                                            ref="tree"
                                            @check-change="treeChange"
                                            @node-expand="handleNodeClick"
                                            @node-click="handleNodeClick">
                                    </el-tree>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="19" :lg="19" :span="24">
                        <div class="grid-content bg-purple">
                            <div class="right-box">
                                <div class="left-title">
                                    <div class="inline-block">
                                        <span class="demonstration">统计时间：</span>
                                        <el-date-picker v-model="statisticTime" size="mini"
                                                :type="pickerType" :value-format="valFormat"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </div>
                                    <div class="inline-block">
                                        <span class="demonstration">能源类型：</span>
                                        <el-select v-model="energyType" size="mini" placeholder="请选择">
                                            <el-option v-for="(item,index) in energyData" :key="index" :label="item.name"
                                                       :value="parseInt(item.id)">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="inline-block">
                                        <span class="demonstration">组织类型：</span>
                                        <el-select v-model="orgType" size="mini" @change="orgTypeChange" placeholder="请选择">
                                            <el-option v-for="item in orgTypeData" :key="item.dicValue" :label="item.dicName"
                                                       :value="item.dicValue">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <!--<div class="inline-block">-->
                                        <!--<span class="demonstration">统计对象：</span>-->
                                        <!--<el-select v-model="statisticObj" multiple  size="mini" placeholder="请选择">-->
                                            <!--<el-option v-for="item in orgObjData" :key="item.id" :label="item.orgFullName"-->
                                                       <!--:value="item.id">-->
                                            <!--</el-option>-->
                                        <!--</el-select>-->
                                    <!--</div>-->
                                    <div class="inline-block" style="float: right">
                                        <el-button type="primary" size="mini" @click="exportTable">导出</el-button>
                                    </div>
                                    <div class="inline-block" style="float: right">
                                        <el-button type="primary" size="mini" @click="searchBtn">查询</el-button>
                                    </div>

                                </div>

                            </div>
                            <div style="margin-top: 20px;">
                                <template>
                                    <el-table  stripe :data="dataTable" style="width: 100%" id="exportTab">
                                        <el-table-column :label="tableTitle">
                                            <el-table-column prop="orderNo" label="序号" width="150"></el-table-column>
                                            <el-table-column prop="name" label="组织机构" width="150"></el-table-column>
                                            <el-table-column v-for="(item,index) in dataX" :label="item" :key="index">
                                                <el-table-column :label="'单位('+tableUnit+')'" width="120">
                                                    <template slot-scope="scope">
                                                        <span>{{scope.row.data[index]}}</span>
                                                    </template>
                                                </el-table-column>
                                            </el-table-column>
                                        </el-table-column>
                                    </el-table>
                                </template>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
    
</template>

<script>
    import {regionalRoot,getSubOrgList,getBaseEnergyTypeListNews,getOrgTypeData,getOrgObjData,getAllBuildListFormData} from '../../../api/index';
    import {famatDatesTimes} from '../../common/com';
    import {exportTable} from '../../../exporttable/index'
    export default {
        name: "energy-form-build",
        data(){
            return {
                selectTag:1,
                energyType:'',
                energyData:'',
                orgType:'',
                statisticObj:[],
                statisticTime:'',
                valFormat:'yyyy-MM',
                orgTypeData:'',
                orgObjData:'',
                staticisType:1,
                pickerType:'month',
                tableTitle:'',
                dataX:[],
                tableUnit:'',
                dataTable: [],
                tagsList:[],
                demoData:'',
                clickedId:'',
                lazyInitData:[],
                lazyNode:null,
                lazyResolve:null,
                clickNode:null,
                clikData:null,
                props: {
                    label: 'orgName',
                    children: 'zones',
                    isLeaf: 'leaf'
                },
            }
        },
        mounted(){
            this.getEnergyTypeData();
            this.getOrgTypeData();
        },
        created(){
            this.getData();
        },
        methods:{
            loadNode(node, resolve) {
                this.lazyNode = node;
                this.lazyResolve = resolve;
                if (node.level === 0) {
                    return resolve(this.tagsList);
                }
                // if (node.level > 1) return resolve([]);

                setTimeout(() => {
                    console.log(this.clickedId)
                    getSubOrgList({
                        pid:this.clickedId
                    }).then((res)=>{
                        console.log(res)
                        this.lazyInitData = res.datas;

                        resolve(this.lazyInitData);
                    })


                }, 500);
            },
            //获取组织机构数据
            getData(){
                regionalRoot({

                }).then((res) =>{
                    // console.log(res)
                    var dataArr = new Array();
                    dataArr[0] = res.expandData.root;
                    dataArr[0]['children'] = res.expandData.childrens;
                    this.tagsList = dataArr;

                    this.clickedId = this.tagsList[0].id;
                    // console.log(dataArr)
                })
            },
            //获取树的子节点
            getSubOrgList(){
                console.log(this.clickedId)
                getSubOrgList({
                    pid:this.clickedId
                }).then((res)=>{
                    console.log(res)
                    this.lazyInitData = res.datas;
                })
            },
            //树复选框点击
            treeChange(data,node,val){
                console.log(data)
                console.log(node)
                console.log(val)
                // console.log(this.$refs.tree.getCheckedNodes())
               // 如果子节点全部选中，获取父节点信息，否则选中的节点信息
               function getSimpleCheckedNodes(store){
                    const checkedNodes = [];
                    const traverse = function(node) {
                        const childNodes = node.root ? node.root.childNodes : node.childNodes;
                        childNodes.forEach(child => {
                            if (child.checked) {
                                checkedNodes.push(child.data);
                            }
                            if (child.indeterminate) {
                                traverse(child);
                            }
                        });
                    };
                    traverse(store)
                    return checkedNodes;
                }
                // console.log(getSimpleCheckedNodes(this.$refs.tree.store))
                var ckeckedDatas =  getSimpleCheckedNodes(this.$refs.tree.store);
                this.statisticObj = [];
                for(var i=0;i<ckeckedDatas.length;i++){
                    this.statisticObj.push(ckeckedDatas[i].id)
                }
                console.log(this.statisticObj)
                if(node){
                    // this.$refs.tree.setCheckedNodes([data]);
                    this.curr_id = data.id;
                    this.cur_page = 1;
                }else{
                    this.tableData = [];
                    this.page_total = 1;
                    if(this.curr_id==data.id){
                        this.curr_id = "";
                    }
                }


            },
            //树的节点点击事件
            handleNodeClick(data,node) {
                this.clikData = data;
                this.clickNode = node;

                // this.$refs.tree.setCheckedNodes([data]);

                if(data.pid === 0){
                    this.clickedId = data.id;
                    this.demoData = data;
                    this.demoData['pname'] = data.orgName;
                    return ;
                }
                this.clickedId = data.id;
                this.demoData = data;
                this.demoData['pname'] = node.parent.data.orgName;


            },
            getEnergyTypeData(){
                getBaseEnergyTypeListNews({}).then((res)=>{
                    this.energyData = res
                })
            },
            getOrgTypeData(){
                getOrgTypeData({}).then((res)=>{
                    this.orgTypeData = res.datas;
                })
            },
            getOrgObjData(){
                getOrgObjData({
                    typeName:this.orgType
                }).then((res)=>{
                    this.orgObjData = res.datas;
                })
            },
            orgTypeChange(val){
                // this.statisticObj = [];
                // this.getOrgObjData();
            },
            getAllBuildListFormData(){
                getAllBuildListFormData({
                    startDate:this.statisticTime,
                    endDate:'',
                    energyType:this.energyType,
                    orgType:this.orgType,
                    ids:this.statisticObj,
                    staticisType:this.selectTag,
                }).then((res)=>{
                    this.dataX = res.X.data2;
                    this.dataTable = res.dataTable;
                    this.tableTitle = res.X.title;
                    this.tableUnit = res.X.unit;
                })
            },
            searchBtn(){
                this.getAllBuildListFormData();
            },
            exportTable(){
                exportTable('#exportTab',this.tableTitle)
            },
            selectClick(v){
                this.selectTag = v;
                this.statisticTime = "";
                if(v==1){
                    this.pickerType = 'month';
                    this.valFormat = 'yyyy-MM';
                }
                if(v==2){
                    this.pickerType = 'year';
                    this.valFormat = 'yyyy';
                }
            },
            formatTime(row, column, cellValue){
                return famatDatesTimes(cellValue);
            },
        },
    }
</script>

<style scoped>
    /deep/ .el-tag{
        margin-right: 25px;
        line-height: 36px;
        height: 36px;
        font-size: 16px;
        background-color: #fff;
        border: 0;
        cursor: pointer;
    }
    .tag-header{
        color: #0FBBB5;
    }
    .tag-header.active{
        color: #fff;
        background-color: #0fbbb5;
    }
    .inline-block{
        display: inline-block;
        margin-right: 10px;
        /*width: 30%;*/
    }
    .inline-block .demonstration{
        font-size: 14px;
    }
    /deep/ .el-date-editor.el-input {
        width: 110px;
    }
    /deep/ .el-select{
        width: 110px;
    }
    /deep/ .inline-block .el-tag {
        margin-right: 0;
        line-height: 20px;
        height: 20px;
        font-size: 12px;
    }
    .left-box{
        border: 1px solid #409EFF;
        min-height: 800px;
    }
    .left-box .left-title{
        height: 40px;
        line-height: 40px;
        background-color: #409EFF;
        color: #fff;
        padding: 0 10px;
    }
</style>